<template>
	<view class="page" :style="{ 'min-height': h + 'px', 'padding-top': mt + 'px' }">
		<c-nav-bar :title="title"></c-nav-bar>
		<view style="padding: 20rpx 30rpx;">
			<view class="hander">
				<view class="one">
					<view class="title">
						处理结果？
					</view>
				</view>
				<view class="two">
					<view class="demo-layout bg-purple-dark" @click="tab(1,5)">
						<view class="">
							<view class="image">
								<image src="https://i.ringzle.com/file/20240103/79cc8b2d35674193a37b060e005cadf1.png"
									mode="aspectFill" v-show="tabIndex ==1"></image>
								<image src="https://i.ringzle.com/file/20240102/5a73d439f4664f60a2a6ea130c08a70f.png"
									mode="aspectFill" v-show="tabIndex !==1"></image>
							</view>
							<view class="text">
								非常满意
							</view>
						</view>
					</view>
					<view class="demo-layout bg-purple-dark" @click="tab(2,4)">
						<view class="">
							<view class="image">
								<image src="https://i.ringzle.com/file/20240330/7c3a7458d6c74bc5adf0215f55593a9c.png"
									mode="aspectFill" v-show="tabIndex ==2"></image>
								<image src="https://i.ringzle.com/file/20240330/84e83bcaf5e449d499a9ddb992c2b7f8.png"
									mode="aspectFill" v-show="tabIndex !==2"></image>
							</view>
							<view class="text">
								满意
							</view>
						</view>
					</view>
					<view class="demo-layout bg-purple-dark" @click="tab(3,3)">
						<view class="">
							<view class="image">
								<image src="https://i.ringzle.com/file/20240330/5032c60e775f48dcb60c9fa39e328a67.png"
									mode="aspectFill" v-show="tabIndex ==3"></image>
								<image src="https://i.ringzle.com/file/20240330/12eb07970bae453ebc5044b3d16ac4f0.png"
									mode="aspectFill" v-show="tabIndex !==3"></image>
							</view>
							<view class="text">
								一般
							</view>
						</view>
					</view>
					<view class="demo-layout bg-purple" @click="tab(4,2)">
						<view class="">
							<view class="image">
								<image src="https://i.ringzle.com/file/20240330/20bff58d3e684d17868ba026c0d865e8.png"
									mode="aspectFill" v-show="tabIndex ==4"></image>
								<image src="https://i.ringzle.com/file/20240330/355dd2cad4b049ca95d170894f2c2c5e.png"
									mode="aspectFill" v-show="tabIndex !==4"></image>
							</view>
							<view class="text">
								不满意
							</view>
						</view>
					</view>
					<view class="demo-layout bg-purple-light" @click="tab(5,1)">
						<view class="">
							<view class="image">
								<image src="https://i.ringzle.com/file/20240103/ad811364a9874d1b832eac5d802a667d.png"
									mode="aspectFill" v-show="tabIndex ==5"></image>
								<image src="https://i.ringzle.com/file/20240102/fa90c19d4783456e9fcd943a27afec03.png"
									mode="aspectFill" v-show="tabIndex !==5"></image>
							</view>
							<view class="text">
								非常不满意
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="content">
				<u--textarea v-model="fromData.comment" placeholder="留下更有帮助性的评价吧！" border="none" height='332rpx'
					autoHeight='true' maxlength='-1'></u--textarea>
			</view>
		</view>
		<view class="start">
			<view class="item">
				<text>处理速度</text>
				<u-rate active-color="#FEB000" size="46" inactive-color="#A9B4C1" v-model="fromData.isTimely"
					gutter="24"></u-rate>
			</view>
			<view class="item">
				<text>处理结果</text>
				<u-rate active-color="#FEB000" size="46" inactive-color="#A9B4C1" v-model="fromData.isPerfection"
					gutter="24"></u-rate>
			</view>
			<view class="item">
				<text>服务态度</text>
				<u-rate active-color="#FEB000" size="46" inactive-color="#A9B4C1" v-model="fromData.attitude"
					gutter="24"></u-rate>
			</view>
		</view>
		<view class="btn" @click="save">
			发布
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "评价",
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				value5: '',
				tabIndex: null,
				fileList: [],
				picList: [],
				imageList: [],
				fromData: {
					comment: '', //内容
					guideId: '', //  接受的id  列表订单的 id
					userId: JSON.parse(wx.getStorageSync('userInfo')).id, // 评价用户id
					score: '', //评价选择
					attitude: '', //态度
					isTimely: '', //速度
					isPerfection: '', //结果
					orderCode: '', //订单编号
					sourceType: '', //评价来源(1景点 2酒店 3船票 4餐饮 5船+宿 6导游预订 7船+景 8宿+景 9:船票往返 10渔家乐 11智慧停车场 12小工市场）
				},
				detail: null
			}
		},
		onLoad(option) {
			let obj = JSON.parse(option.obj);
			this.fromData.guideId = obj.guideId;
			this.fromData.orderCode = obj.guideId;
			this.fromData.sourceType = obj.sourceType;

			if (option.item) this.detail = JSON.parse(option.item);
		},
		methods: {
			// 选择
			tab(index, e) {
				this.tabIndex = index;
				this.fromData.score = e;
			},
			// 发布
			save() {
				if (!this.fromData.score) return this.$showToast('请选择评价');
				if (!this.fromData.isTimely) return this.$showToast('请选择处理速度');
				if (!this.fromData.isPerfection) return this.$showToast('请选择处理结果');
				if (!this.fromData.attitude) return this.$showToast('请选择服务态度');
				this.$api.post('/api/guide/userComment', this.fromData).then(res => {
					if (res.data.code === 0) {
						this.detail.state = 6;
						this.$api.put('/api/complaint', this.detail).then(res2 => {
							if (res2.data.code == 0) {
								this.$showToast('评价成功');
								setTimeout(() => {
									uni.redirectTo({
										url: '/pagesMy/complaintFeedback/dataList'
									})
								}, 1500)
							} else {
								this.$showToast(res2.data.msg);
								uni.navigateBack()
							}
						})
					} else this.$showModal(res.data.msg);
				})
			},
		}
	}
</script>
<style lang="less">
	.u-textarea {
		height: 302rpx !important;
	}

	.u-textarea__field {
		height: 302rpx !important;
	}
</style>

<style lang="scss">
	.page {
		// padding: 30rpx;
		box-sizing: border-box;
		padding-bottom: 190rpx;

		.hander {
			.one {
				.title {
					font-size: 36rpx;
					color: #111111;
					margin-top: 20rpx;
					font-weight: bold;
					line-height: 50rpx;
				}
			}

			.two {
				margin-top: 38rpx;
				    border-bottom: 1rpx solid #EFEFEF;
				    padding-bottom: 30rpx;
				    display: grid;
				    grid-template-columns: 17% 17% 17% 17% 22%;
				    gap: 0 10rpx;
				    width: 100%;
				    padding-left: 4%;
				    box-sizing: border-box;
				.demo-layout {
					text-align: center;
					align-items: center;

					.image {
						display: inline-block;
						width: 80rpx;
						height: 80rpx;
						margin-bottom: 28rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.text {
						margin: 20rpx 0rpx;
						font-size: 28rpx;
						color: #88919D;
						font-weight: Regular;
					}
				}
			}
		}

		.content {
			margin-top: 20rpx;
		}

		.start {
			margin: 20rpx auto;
			background: #fff;
			border-top: 20rpx solid #ddd;
			padding: 40rpx 30rpx 0;

			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 48rpx;

				text {
					font-size: 30rpx;
					color: #333;
				}
			}
		}

		.texts {
			// padding-bottom: 200rpx;
			margin-top: 40rpx;
			font-size: 26rpx;
			color: #88919D;
			font-weight: Regular;
		}

		.btn {
			text-align: center;
			margin: 0 auto;
			position: fixed;
			width: 702rpx;
			font-weight: bold;
			bottom: 60rpx;
			line-height: 44px;
			height: 88rpx;
			border-radius: 50rpx;
			border: 1rpx;
			background-color: #007A69;
			font-size: 32rpx;
			color: #FFFFFF;
			left: 24rpx;
		}
	}
</style>